<template>
  <div>
    <el-container>
      <el-header><Header3></Header3></el-header>
      <el-main>
      <div id="title">模型使用</div>
        <el-form ref="form" :model="form" >
          <el-row type="flex" justify="center">
              <el-col :span="20">
              <!-- 在table中添加selection-change的处理函数,回调函数可以拿到选中的数组 -->
                  <el-table
                      :data="tableData"
                      border
                      height="500"
                      style="width: 100%"
                      :row-class-name="tableRowClassName"
                      @selection-change="handleSelectionChange"
                      ref="checkTable"
                      >
                      <el-table-column
                          type="selection"
                          width="55">
                      </el-table-column>
                      <el-table-column
                          align="center"
                          prop="name"
                          label="模型名称"
                          width="180">
                      </el-table-column>
                      <el-table-column
                          align="center"
                          prop="date"
                          label="更新时间"
                          width="180">
                      </el-table-column>
                      <el-table-column
                          align="center"
                          prop="unit"
                          label="开发单位/个人">
                      </el-table-column>
                      <el-table-column
                          align="center"
                          prop="price"
                          label="标价">
                      </el-table-column>
                      <el-table-column
                          align="center"
                          prop="remark"
                          label="备注">
                      </el-table-column>
                      
                      <!--<el-table-column
                          align="center"
                          prop="view"
                          label="查看模型">
                          <el-link>点击详情</el-link>
                      </el-table-column>-->
                  </el-table>
              </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="$router.back()">返回</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round disabled>提交</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="use2">下一步</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer height="120px"><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>

// @ is an alias to /src
import Header3 from "@/components/Header3";
import Footer from "@/components/Footer";


export default {
  name: "Use1",
  components: { Footer,Header3},
  data() {
    
    return {
      items:[
        Header3
      ],
      tableData: [{
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }, {
        name: 'FGLG模型',
        date: '2018-06-23',
        unit: '**公司',
        price: '169元',
        remark: '... ... ...'
      }]
      
    }
  },
  methods:{
    tableRowClassName({rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
        return '';
    },
    use2() {
      this.$router.push("/use2")
    },
    handleSelectionChange (val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>

/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */

  border-radius: 20px; /*输入框圆角值*/
  background-color: #ffffff;
  /*background: transparent;*/
}

.el-button {
  background: #3A62D7;
  border: #3A62D7;
  color: #F5F5F5;
}
.el-row {
  margin-top: 30px;
  margin-bottom: 20px;
}

#title {
  color: #333333;
  font-size: 30px;
  font-weight: bold;
  border: #333333;
  margin-top: 50px;
  margin-bottom: 20px;
  
}

.el-header{
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 3px;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.el-main {
  background-color: #F5F5F5;
  background-size: 100% 100%;
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  height: 800px;
  padding: unset;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
/*table边框颜色
.el-table--border:after,
.el-table--group:after,
.el-table:before {
    background-color: #BBBBBB;
}

.el-table--border,
.el-table--group {
    border-color: #BBBBBB;
}

.el-table td,
.el-table th.is-leaf {
        border-bottom: 1px solid #BBBBBB;
}

.el-table--border th,
.el-table--border th.gutter:last-of-type {
        border-bottom: 1px solid #BBBBBB;
}

.el-table--border td,
.el-table--border th {
        border-right: 1px solid #BBBBBB;
}*/
</style>